<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <title>孕产妇健康管理平台</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
</head>

<body class="vertical-layout vertical-menu 2-columns   menu-expanded fixed-navbar" data-open="click"
  data-menu="vertical-menu" data-color="bg-gradient-x-purple-blue" data-col="2-columns">
  <nav
    class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-semi-light">
    <div class="navbar-wrapper">
      <div class="navbar-container content">
        <div class="collapse navbar-collapse show" id="navbar-mobile">
          <ul class="nav navbar-nav mr-auto float-left">
            <li class="nav-item mobile-menu d-md-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs"
                href="javascript:;"><i class="ft-menu font-large-1"></i></a></li>
            <li class="nav-item d-none d-md-block"><a class="nav-link nav-menu-main menu-toggle hidden-xs"
                href="javascript:;"><i class="ft-menu"></i></a></li>
            <li class="nav-item dropdown navbar-search"><a class="nav-link dropdown-toggle hide" data-toggle="dropdown"
                href="javascript:;"><i class="ficon ft-search"></i></a>
              <ul class="dropdown-menu">
                <li class="arrow_box">
                  <form>
                    <div class="input-group search-box">
                      <div class="position-relative has-icon-right full-width">
                        <input class="form-control" id="search" type="text" placeholder="Search here...">
                        <div class="form-control-position navbar-search-close"><i class="ft-x"></i></div>
                      </div>
                    </div>
                  </form>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav float-right">
            <li class="dropdown dropdown-user nav-item"> <a class=" nav-link dropdown-user-link" href="login.html">
                <span class="username"><i class="ft-power"></i>退出登录</span> </a> </li>
            <li class="dropdown dropdown-user nav-item"> <a class="dropdown-toggle nav-link dropdown-user-link"
                href="javascript:;"> <span class="username">Admin</span> <span class="avatar avatar-online"><img
                    src="app-assets/images/avatar-s-19.png" alt="avatar"></span> </a> </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  <div class="main-menu menu-fixed menu-light menu-accordion    menu-shadow " data-scroll-to-active="true"
    data-img="app-assets/images/backgrounds/02.jpg">
    <div class="navbar-header">
      <ul class="nav navbar-nav flex-row">
        <li class="nav-item mr-auto"><a class="navbar-brand" href="index.html"><img class="brand-logo"
              alt="Chameleon admin logo" src="app-assets/images/logo.png" />
            <h3 class="brand-text">孕产妇健康管理平台</h3>
          </a></li>
        <li class="nav-item d-md-none"><a class="nav-link close-navbar"><i class="ft-x"></i></a></li>
      </ul>
    </div>
    <div class="main-menu-content">
      <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
        <li class=" nav-item"><a href="index.html"><i class="ft-home"></i><span class="menu-title">首页</span></a></li>
        <li class=" nav-item "><a href="javascript:;"><i class="ft-layers"></i><span class="menu-title"> 系统设置</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="基本设置.html">基本设置</a> </li>
            <li><a class="menu-item" href="管理员管理.html">管理员管理</a> </li>
            <li><a class="menu-item" href="用户参数管理.html">用户参数管理</a> </li>
          </ul>
        </li>
        <li class=" nav-item "><a href="javascript:;"><i class="ft-users"></i><span class="menu-title"> 用户管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="用户管理.html">用户管理</a> </li>
            <li><a class="menu-item" href="团体用户管理.html">团体用户管理</a></li>
            <li><a class="menu-item" href="添加用户.html">添加用户</a></li>
            <li><a class="menu-item" href="团体管理.html">团体管理</a></li>
          </ul>
        </li>
        <li class=" nav-item "><a href="javascript:;"><i class="ft-layout"></i><span class="menu-title"> 评测管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="评测预约.html">评测预约</a></li>
            <li><a class="menu-item" href="答题记录.html">答题记录</a></li>
          </ul>
        </li>
        <li class=" nav-item "><a href="javascript:;"><i class="ft-feather"></i><span class="menu-title">
              量表管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="量表管理.html">量表管理</a></li>
            <li><a class="menu-item" href="量表类别管理.html">量表类别管理</a></li>
            <li><a class="menu-item" href="套餐管理.html">套餐管理</a></li>
          </ul>
        </li>
        <li class=" nav-item open"><a href="javascript:;"><i class="ft-edit"></i><span class="menu-title">
              医师管理</span></a>
          <ul class="menu-content">
            <li class="active"><a class="menu-item" href="医师管理.html">医师管理</a> </li>
            <li><a class="menu-item" href="添加医师.html">添加医师</a> </li>
            <li><a class="menu-item" href="科室管理.html">科室管理</a> </li>
            <li><a class="menu-item" href="医师预约管理.html">医师预约管理</a> </li>
            <li><a class="menu-item" href="班次管理.html">班次管理</a> </li>
            <li><a class="menu-item" href="工作时间管理.html">工作时间管理</a> </li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-shield"></i><span class="menu-title"> 预警管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="用户预警.html">用户预警</a></li>
            <li><a class="menu-item" href="题库预警.html">题库预警</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-file-text"></i><span class="menu-title">
              报告管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="报告管理.html">报告管理</a></li>
            <li><a class="menu-item" href="报告审核.html">报告审核</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-trending-up"></i><span class="menu-title">
              数据分析</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="量表分析.html">量表分析</a></li>
            <li><a class="menu-item" href="人群分析.html">人群分析</a></li>
            <li><a class="menu-item" href="阳性分析.html">阳性分析</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-bar-chart-2"></i><span class="menu-title">
              临床数据</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="临床数据管理.html">临床数据管理</a></li>
          </ul>
        </li>
        <li class=" nav-item"><a href="javascript:;"><i class="ft-sidebar"></i><span class="menu-title"> 训练管理</span></a>
          <ul class="menu-content">
            <li><a class="menu-item" href="心理训练管理.html">心理训练管理</a></li>
            <li><a class="menu-item" href="添加心理训练.html">添加心理训练</a></li>
            <li><a class="menu-item" href="训练类别管理.html">训练类别管理</a></li>
            <li><a class="menu-item" href="训练类型管理.html">训练类型管理</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="navigation-background"></div>
  </div>
  <div class="app-content content">
    <div class="content-wrapper">
      <div class="content-wrapper-before"></div>
      <div class="content-header row">
        <div class="content-header-left col-md-4 col-12 mb-2">
          <h3 class="content-header-title">医师管理</h3>
        </div>
        <div class="content-header-right col-md-8 col-12">
          <div class="breadcrumbs-top float-md-right">
            <div class="breadcrumb-wrapper mr-1">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">医师管理</a></li>
                <li class="breadcrumb-item active">医师管理</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
      <div class="content-body">
        <section class="file-browser">
          <div class="row match-height">
            <div class="col-lg-12 col-md-12">
              <div class="card" style="">
                <div class="card-header">
                  <label class="card-title" for="exampleInputFile">医师管理</label>
                </div>
                <div class="card-block" id="app">
                  <div class="card-body">
                    <div class="topbtn">
                      <!--   <a href="添加医师.html" class="btn btn-bg-gradient-x-purple-red">添加医师账号</a> -->
                      <a href="" class="btn btn-bg-gradient-x-purple-red" @click.prevent="addUser()">添加医师账号</a>
                    </div>
                    <div class="selbox">
                      <div  v-show="isShow">
                        <p>姓  名： <input  id="1" v-model="newList.name" placeholder="姓名" ><span></span></p><br>
                        <p>用户名： <input v-model="newList.phone" placeholder="用户名" ><span></span></p><br>
                        <p>序  号： <input v-model="newList.number" placeholder="序号" ><span></span></p><br>
                        <p>科  室:  <select  v-model="newList.Department" ><br>
                            <option  value="0" disabled  selected>请选择科室</option>
                            <option value="儿科">儿科</option>
                            <option value="妇科">妇科</option>
                            <option value="产科">产科</option>
                            <option value="皮肤科">皮肤科</option>
                          </select><span></span></p>
                        <button @click="saveUser()"  class="btn btn-bg-gradient-x-purple-red" >保存</button>
                        <button @click="closeWindow()" class="btn btn-bg-gradient-x-purple-red">关闭</button>
                      </div>
                      <div class="form1">
                        <ul class="row">
                          <li class="col-xs-4">
                            <span>医师姓名：</span>
                            <input type="text" v-model="keyWords" class="form-control">
                          </li>
                          <!-- <li class="col-xs-4">
                            <span>所属科室：</span>
                            <select class="form-control"   >
                              <option>所有科室</option>
                              <option value="儿科">儿科</option>
                              <option value="妇科">妇科</option>
                              <option value="产科">产科</option>
                              <option value="皮肤科">皮肤科</option>
                            </select>
                          </li> -->
                          <li class="col-xs-4" style="padding-left: 10px">
                            <a href="javascript:;" class="btn btn-primary" @click="toSearchUser">查询</a>
                            <a href="javascript:;" class="btn btn-default" @click="reSetSearchUser">重置</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <table class="table">
                      <thead>
                        <tr>
                          <th><input type="checkbox" class="allsel"></th>
                          <th>医师Id</th>
                          <th>医师姓名</th>
                          <th>用户名</th>
                          <th>所属科室</th>
                          <th>排序</th>
                          <th>排班</th>
                          <th>状态</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>

                        <tr v-for="(item,index) in searchUser" :key="index">
                          <th><input type="checkbox" class="allsel"></th>
                          <td>{{item.id}}</td>
                          <td>{{item.name}}</td>
                          <td>{{item.phone}}</td>
                          <td>{{item.Department}}</td>
                          <td>{{item.number}}</td>

                          <td><a href="医师排班管理.html">排班</a></td>
                          <td><span class="badge badge-success">通过</span></td>
                          <td>
                            <a href="#" @click.prevent="InforChange(item.id)">修改</a>
                            <a href="#" @click="del(item.id)">删除</a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="">
                      <a href="javascript:;" class="btn btn-success">审核</a>
                      <a href="javascript:;" class="btn btn-warning">拒绝</a>

                    </div>
                    <nav aria-label="Page navigation" class="page">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="javascript:;" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                          </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
                        <li class="page-item active"><a class="page-link" href="javascript:;">3</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">4</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;">5</a></li>
                        <li class="page-item">
                          <a class="page-link" href="javascript:;" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                          </a>
                        </li>
                      </ul>
                    </nav>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <footer class="footer footer-static footer-light navbar-border navbar-shadow">
    <div class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
        class="float-md-left d-block d-md-inline-block">2018 &copy; Copyright 孕产妇健康管理平台 © 2018-2020</span>
      <ul class="list-inline float-md-right d-block d-md-inline-blockd-none d-lg-block mb-0">
        <li class="list-inline-item">孕产妇健康管理平台</li>
      </ul>
    </div>
  </footer>


  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">套餐添加修改</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form form-horizontal">
            <div class="form-body">
              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput1">套餐名称</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

              <div class="form-group row">
                <label class="col-md-3 label-control" for="eventRegInput2">套餐排序</label>
                <div class="col-md-9">
                  <input type="text" class="form-control">
                </div>
              </div>

            </div>
          </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-def" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-danger">执行操作</button>
        </div>
      </div>
    </div>
  </div>


  <!-- BEGIN VENDOR JS-->
  <!-- <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script> -->
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { ref, reactive } = Vue;
    const app = Vue.createApp({

      setup(props) {
        const keyWords = ref('')
        let isShow = ref(false)
        let maxId = ref(0)
        let searchUser = ref([])
        let newList = ref({
          id: '',
          name: '',
          phone: '',
          Department: '',
          number: '',
        })
        //将数据写死在setup中
        let todoList = ref([{
          id: 1,
          name: '马大夫',
          phone: '123456',
          Department: '儿科',
          number: '1',
        },
        {
          id: 2,
          name: '王大夫',
          phone: '123456',
          Department: '妇科',
          number: '2',
        }
        ])
        //通过表单提交添加数据
        //新增用户
        function saveUser() {
          const id = newList.value.id;
          if (!newList.value.name || !newList.value.phone) {
            alert('输入框不能为空！！！')
          }
          else if (id > 0) {
            let editUser = todoList.value.filter(function (item) {
              return id == item.id
            })
            //原始数据对象： editUser， 修改为：this.newUser
            if (editUser.length == 1) {
              Object.assign(editUser[0], newList.value);
            } else {
              alert('更新失败，未找到原始记录！');
              return false;
            }
          } else {
            newList.value.id = maxId.value++;
            todoList.value.push(newList.value);
          }
          newList.value = { id: 0, name: '', phone: '', Department: '', number: '' }
          toSearchUser();
          closeWindow();
        }
        //删除数据
        function del(id){
                	alert('确认删除此数据吗？')
                	var index = todoList.value.findIndex(item=>{
                    	if(item.id == id){
                        	return true;
                   		}
                	})
                	todoList.value.splice(index, 1);
					toSearchUser();
            	}
        //打开新增窗口
        function addUser() {
          isShow.value = true;
        }
        //关闭新增窗口
        function closeWindow() {
          this.isShow = false;
        }
        //修改数据
        function InforChange(id) {
          let obj = todoList.value.filter(function (item) {
            const flag = item.id == id;
            return flag;
          })
          if (obj.length == 1) {
            obj = obj[0];
            newList.value.id = obj.id;
            newList.value.name = obj.name;
            newList.value.phone = obj.phone;
            newList.value.Department = obj.Department;
            newList.value.number = obj.number;
            addUser();
          }
        }

        //搜索数据
        function toSearchUser() {
          const condition = keyWords.value;
          searchUser.value = todoList.value.filter(function (item) {
            const flag = item.name.indexOf(condition) != -1;
            return flag
            console.log('hello ,i am toSeachUser  function.')
          })
        }

        //重置搜索条件，重新搜索
        function reSetSearchUser() {
          keyWords.value = '';
          toSearchUser();
        }
        return {searchUser,isShow,newList,maxId,keyWords, todoList,saveUser, addUser, del, closeWindow,toSearchUser,reSetSearchUser,InforChange }
      },
      mounted() { //页面加载后初始化工作
            //1、页面加载后自动搜索
            	this.searchUser = this.todoList;
            //2、初始化id值,this.maxId
            	for (let index = 0; index < this.todoList.length; index++) {
                	const element = this.todoList[index];
                	if(this.maxId < element.id){
                    	this.maxId = element.id + 1
                	}
            	}
            	console.log('maxId = ' + this.maxId)
        	},
			computed:{
            	totals(){
                	return this.searchUser.length;
            	}
        	}

    })
    const vm = app.mount("#app")
  </script>
</body>

</html>